<html>
  <head>
    <script src="js/timeline-api.js" type="text/javascript"></script>
<script type="text/javascript">
	var tl;
function onLoad() {
  var eventSource = new Timeline.DefaultEventSource();
  var bandInfos = [
    Timeline.createBandInfo({
	        eventSource:    eventSource,
        date:           "Jun 1 2007 00:00:00 GMT",
        width:          "90%", 
        intervalUnit:   Timeline.DateTime.WEEK, 
        intervalPixels: 100
    }),
    Timeline.createBandInfo({
	        eventSource:    eventSource,
        date:           "Jun 1 2007 00:00:00 GMT",
        width:          "10%", 
        intervalUnit:   Timeline.DateTime.YEAR, 
        intervalPixels: 200
    })
  ];
  
    bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;
  
  
  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
  Timeline.loadXML("output.xml", function(xml, url) { eventSource.loadXML(xml, url); });
}

var resizeTimerID = null;
function onResize() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            tl.layout();
        }, 500);
    }
}
</script>
  </head>
  <body onload="onLoad();" onresize="onResize();">
<div id="my-timeline" style="height: 550px; border: 1px solid #aaf"></div>
	</body>
</html>